<template>
  <div class="module_header">
    <h4>
      <span>{{ title }}</span>
      <span>【{{ status }}】</span>
    </h4>
    <div class="AAL001">
      <span>出厂编号</span>
      <el-input v-model="meter" size="mini" disabled></el-input>
    </div>
    <div class="operation">
      <el-button type="primary" size="mini">上报</el-button>
      <el-button type="success" size="mini">刷新</el-button>
      <el-button type="danger" size="mini">打回</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'
@Component
class ModuleHeader extends Vue {
  @Prop({ required: true }) title!: string
  @Prop({ required: true }) status!: string
  @Prop({ required: true }) meter!: string
}
export default ModuleHeader
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.module_header {
  width: 100%;
  margin-bottom: 10px;
  #flex(row, center, space-between);
  h4 {
    margin-block: 0;
    font-size: 18px;
    font-weight: 800;
    white-space: nowrap;
    #color(color, --primary-text-color);
  }
  .AAL001 {
    #flex(row, center, space-between);
    span {
      font-size: 14px;
      font-weight: 400;
      margin-right: 5px;
      white-space: nowrap;
      #color(color, --primary-text-color);
    }
  }
}
</style>
